<template>
    <div class="home">
        <el-container>
            <el-header height="60px">
                <HomeHeader></HomeHeader>
            </el-header>
            <el-container>
                <!-- 通过面包屑传过来的isCollapse的布尔值，决定el-aside的宽度 -->
                <el-aside :width="isCollapse ? '64px' : '250px'">
                    <HomeAside></HomeAside>
                </el-aside>
                <el-main class="bgcolor">
                    <BreadCrumb></BreadCrumb>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { Container, Header, Aside, Main } from 'element-ui';
import HomeHeader from '@/components/Home/HomeHeader';
import HomeAside from '@/components/Home/HomeAside'
export default {
    data() {
        return {
            isCollapse: true
        }
    },
    components: {
        'el-container': Container,
        "el-header": Header,
        "el-aside": Aside,
        "el-main": Main,
        HomeHeader,
        HomeAside
    },
    mounted() {
        //将this赋值给that，因为在事件的回调函数中，this指向触发事件的对象
        var that = this
        //通过$eventBus绑定事件之前要先解绑，避免反复触发，或内存泄漏
        this.$eventBus.$off('changeIsCollapse');
        this.$eventBus.$on('changeIsCollapse', (msg) => {
            console.log(msg)
            //通过面包屑传过来的isCollapse的布尔值，决定el-aside的宽度
            that.isCollapse = msg
        })

    }
}
</script>

<style lang="less" scoped>
.home {
    width: 100%;
    height: 100%;

    .el-container {
        background-color: #B3C0D1;

        .el-header {
            background-color: #5D5F86;
            color: white;
        }

        .el-container {
            .el-aside {
                background-color: #1A225A;
                color: #333;
            }

            .el-main {
                color: #333;
                background-image: linear-gradient(135deg, #171F57, #A08FA4);
                // /deep/ .bgcolor{
                //     background-image: linear-gradient(135deg,#171F57,#A08FA4);
                // }
            }
        }
    }
}
</style>